<template>
  <el-dialog
    v-model="visible"
    :width="600"
    :title="!dataForm.id ? '新增运单' : '修改运单'"
    :close-on-click-modal="false">
    <el-form
      ref="dataFormRef"
      :model="dataForm"
      :rules="dataRules"
      label-width="120px"
      @keyup.enter="submitHandle()">
      <el-form-item prop="sysOrgId" label="选择公司车队">
        <ma-org-select
          v-model="dataForm.sysOrgId"
          placeholder="请选择"
          authority="true"
          :disabled="userStore.user.orgId"
          @change="orgChanged"></ma-org-select>
      </el-form-item>
      <el-form-item label="装货矿区" prop="mineId">
        <el-select v-model="dataForm.mineId" placeholder="请选择" @change="mineChange">
          <el-option v-for="item in mineList" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <div class="item_line">
        <!-- <el-form-item label="车队" prop="teamId">
          <el-select
            v-if="dataForm.mineId"
            v-model="dataForm.teamId"
            placeholder="请选择"
            @change="teamChange">
            <el-option v-for="car in teamList" :key="car.id" :label="car.name" :value="car.id" />
          </el-select>
        </el-form-item> -->
        <!-- <el-form-item label="司机" prop="driverId">
          <el-select
            v-if="dataForm.teamId"
            v-model="dataForm.driverId"
            placeholder="请选择"
            @change="driverChange">
            <el-option
              v-for="drive in driveList"
              :key="drive.id"
              :label="drive.name"
              :value="drive.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="车辆" prop="carId">
          <el-select v-if="dataForm.driverId" v-model="dataForm.carId" placeholder="请选择">
            <el-option v-for="car in carList" :key="car.id" :label="car.plateNo" :value="car.id" />
          </el-select>
        </el-form-item> -->
        <el-form-item label="选择车辆" prop="carId">
          <el-select
            v-model="dataForm.carId"
            placeholder="请选择"
            filterable
            allow-create
            remote
            :loading="inputLoading"
            :remote-method="searchMethod">
            <el-option
              v-for="car in carList"
              :key="car.id"
              :label="`${car.plateNo}-${car.driverName}`"
              :value="car.id" />
          </el-select>
        </el-form-item>
      </div>
      <el-form-item label="计划拉运时间" prop="planningTime">
        <el-date-picker
          v-model="dataForm.planningTime"
          type="datetime"
          placeholder="计划拉运时间"
          value-format="YYYY-MM-DD HH:mm:ss"></el-date-picker>
      </el-form-item>
      <div class="item_line">
        <el-form-item label="货源编号" prop="sourceNo">
          <el-input v-model="dataForm.sourceNo" placeholder="货源编号"></el-input>
        </el-form-item>
        <el-form-item label="货源名称" prop="sourceName">
          <el-input v-model="dataForm.sourceName" placeholder="货源名称"></el-input>
        </el-form-item>
      </div>
      <div class="item_line">
        <el-form-item label="货源类型" prop="sourceType">
          <el-input v-model="dataForm.sourceType" placeholder="货源类型"></el-input>
        </el-form-item>
        <el-form-item label="货物类型" prop="goodsType">
          <el-input v-model="dataForm.goodsType" placeholder="货物类型"></el-input>
        </el-form-item>
      </div>
    </el-form>
    <template #footer>
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="submitHandle()">确定</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus/es'
import { useWaybillApi, useWaybillSubmitApi } from '@/api/biz/waybill'
import { useMineList } from '@/api/biz/mine'
import { useTeamListApi } from '@/api/biz/team'
import { useDriverListApi } from '@/api/biz/driver'
import { useCarListApi, useCarAllListApi } from '@/api/biz/car'
import { useUserStore } from '@/store/modules/user'
const userStore = useUserStore()

const emit = defineEmits(['refreshDataList'])
const mineList = ref<any[]>([])
const visible = ref(false)
const dataFormRef = ref()
const teamList = ref<any[]>([])
const driveList = ref<any[]>([])
const carList = ref<any[]>([])
const inputLoading = ref(false)

const dataForm = reactive({
  id: '',
  planningTime: '',
  sourceName: '',
  sourceNo: '',
  sourceType: '',
  goodsType: '',
  teamId: '',
  driverId: '',
  carId: '',
  mineId: '',
  startTime: '',
  endTime: '',
  status: '',
  sysOrgId: userStore.user.orgId,
  otherInfo: undefined
})

const init = (id?: number) => {
  visible.value = true
  dataForm.id = ''

  // 重置表单数据
  if (dataFormRef.value) {
    dataFormRef.value.resetFields()
  }

  if (id) {
    getWaybill(id)
  }

  getMineList()
}

const getWaybill = (id: number) => {
  useWaybillApi(id).then((res) => {
    Object.assign(dataForm, res.data)
  })
}
function getMineList() {
  useMineList().then((res) => {
    mineList.value = res.data
  })
}

function orgChanged(val) {
  useCarAllListApi({
    sysOrgId: val
  }).then((res) => {
    carList.value = res.data
  })
}

function searchMethod(query: string) {
  if (query) {
    inputLoading.value = true
    useCarAllListApi({
      sysOrgId: dataForm.sysOrgId,
      key: query
    }).then((res) => {
      inputLoading.value = false
      carList.value = res.data
    })
  } else {
    useCarAllListApi({
      sysOrgId: dataForm.sysOrgId
    }).then((res) => {
      carList.value = res.data
    })
  }
}

function teamChange(val) {
  useDriverListApi({
    teamId: val
  }).then((res) => {
    driveList.value = res.data
  })
}

function mineChange(val) {
  useTeamListApi({
    mineId: val
  }).then((res) => {
    teamList.value = res.data
  })
}

function driverChange(val) {
  useCarListApi({
    driverId: val
  }).then((res) => {
    carList.value = res.data
  })
}

const dataRules = ref({
  mineId: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
  planningTime: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
  carId: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
  sysOrgId: [{ required: true, message: '必填项不能为空', trigger: 'blur' }]
})

// 表单提交
const submitHandle = () => {
  dataFormRef.value.validate((valid: boolean) => {
    if (!valid) {
      return false
    }

    useWaybillSubmitApi(dataForm).then(() => {
      ElMessage.success({
        message: '操作成功',
        duration: 500,
        onClose: () => {
          visible.value = false
          emit('refreshDataList')
        }
      })
    })
  })
}

defineExpose({
  init
})
</script>

<style scoped>
.item_line {
  display: flex;
}
.item_line > div {
  flex: 1;
}
</style>
